<template>
  <div style="height: 400px">
    <FloatDown v-bind="props" ref="down" >
      <!-- 默认插槽 -->
      <div class="slot">
        被画布覆盖的默认插槽
      </div>
      <!--  -->
      <template #above>
        <div class="slot above">
          <button @click="start(false)">开始</button>
          <button @click="start()">开始并重置</button>
          <button @click="stop(false)">停止</button>
          <button @click="stop()">停止并清除</button>
          <div>在画布之上的 above 插槽</div>
        </div>
      </template>
    </FloatDown>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue"

// 传递给组件的参数
const props = reactive({
  //imgList: ['https://img.51miz.com/Element/00/82/42/73/51502b61_E824273_efdb571d.png'], // 飘落图片列表
  minWidth: 40,
  minHeight: 40,
  count: 20,
  xSpeed: 1,
  ySpeed: 1,
  direction: "right",
  disableRotate: false,
})

// 组件实例
const down = ref()

// 开始飘落动画
function start(reset) {
  down.value?.start(reset)
}

// 停止飘落动画
function stop(clear) {
  down.value?.stop(clear)
}
</script>

<style scoped>
.slot {
  width: 20%;
  height: 30%;
  background-color: #BC78EC;
}
.above {
  position: absolute;
  top: 40%;
  left: 40%;
}
</style>